<template>
  <div class="self-pagination elPaginationStyle centerbox">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.page"
      :page-sizes="[10, 20, 30]"
      :page-size="pages.size"
      layout="total,prev, pager, next,sizes, jumper"
      :total="pages.totalSize"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue ,Prop,Watch} from "vue-property-decorator";

@Component
export default class extends Vue {
    @Prop({ default: () => '' })
    totalSize!: any;
  pages = {
    page: 1,
    size: 20,
    totalSize: 0,
  };
  handleSizeChange(val: any) {
    this.pages.size = val;
    this.$emit('paginSearch')
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.$emit('paginSearch')

  }
   // 监听路由变化
  @Watch("totalSize")
  public routechange(to: any, from: any) {
    this.pages.totalSize=to
  }
  mounted(){
    
    
  }
}
</script>

<style lang="scss" scoped>
.self-pagination {
  width: 100%;
  height: 100%;
}
</style>

